<template>
  <div>
    <el-button @click="willAdd" type="primary">添加</el-button>
    <v-list :user="user" :list="list" :count="count" @init="init" @willEdit="willEdit" :size="size"></v-list>
    <v-form :user="user" @init="init" ref="form"></v-form>
    
  </div>
</template>

<script>
import vForm from "./components/form.vue";
import vList from "./components/list.vue";
import { requserlist, requsercount } from "../../request/api";

export default {
  methods: {
    willAdd(){
      this.user.isshow = true;
      this.user.isAdd = true;
    },
    // 点击修改后  去出发form中的getOne方法拿到当前的数据
    willEdit(id) {
      this.user.isshow = true;
      this.user.isAdd = false;
      this.$refs.form.getOne(id);
    },

    init() {
      // 请求总数
      requsercount().then((res) => {
        if (res.data.code === 200) {
          this.count = res.data.list[0].total;
        }
      });

      // 请列表
      this.getList();
    },
    // 请列表数据
    getList() {
      requserlist({
        size: this.size,
        page: this.page,
      }).then((res) => {
        console.log(111);
        // console.log(res, this.size, Math.ceil(this.count / this.size));
        let list = res.data.list ? res.data.list : [];
        if (list.length == 0 && this.page != 1) {
          this.page--;
          this.getList();
          return;
        }
        this.list = res.data.list ? res.data.list : [];
        console.log(this.list);
      });
    },

    // 修改页码
    changePage(page) {
      this.page = page;
      this.getList();
    },
  },
  components: {
    vForm,
    vList,
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      user: {
        isshow: false,
        isAdd: true,
      },
      // 获取当前的数据列表  传给list
      list: [],
      // 获取总数量
      count: 0,
      // 每页的数量
      size: 3,
      // 页码
      page: 1,
    };
  },
};
</script>

<style lang='less' scoped>
@import "../../less/index.less";
.el-button {
  margin-bottom: @margin;
}
</style>